<template>
  <div class="app-container">
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>

      <el-table-column label="商品ID" width="95" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>

      <el-table-column label="商品数量" align="center">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>

      <el-table-column label="商品价格" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>


      <el-table-column label="商品卖点" align="center">
        <template slot-scope="scope">
          {{ scope.row.sellPoint }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status=1" type="primary" size="mini">
            上架
          </el-button>
          <el-button v-else size="mini" type="danger">
            下架
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editP(scope.row.id)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="delP(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>

import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      list: {

      }
    }
  },
  created() {
    //this.fetchData()
    this.getList()
  },
  methods: {

    getList(){
      const vm=this
      this.axios.get('http://localhost:8090/findListPage?page='+vm.listQuery.page+'&rows='+vm.listQuery.limit)
      .then(res=>{
        vm.total=res.data.total
         vm.list=res.data.itemList
      })
    },
    fetchData() {
      const vm=this
    vm.axios.get('http://localhost:8090/itemList').then(response=>{
      vm.list=response.data
    })
    },
    editP(id){
      this.$router.push("/editProduct/index/"+id)
    },
    delP(id){
      const vm=this
      vm.axios.get('http://localhost:8090/delete?id='+id).then(response=>{
        if(response.data=='success'){
          alert("删除成功！")
          this.fetchData()
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>
